Firebaseの「In-App Messaging」を使ってアプリにダイアログを表示させる方法

こんにちは。クラスメソッドのカスタマーコネクトグループのゆっこです。 Firebaseを使って、アプリにダイアログを表示させる方法をご紹介します。 私のような非エンジニアの方やFirebaseをこれから触るという方の参考になればと思い、「In-App-Messaging」について調べてわかったことや、設定していきながら理解したことをブログにまとめました。

Firebaseとは？

はじめに、Firebaseとはどのようなものかについて簡単に説明します。 FirebaseとはGoogleが提供するアプリ開発を手助けする有益なツールです。例えば、Firebaseの機能の1つである「Authentication（認証）」は、ユーザーがアプリにログインするための実装を容易に行うことができます。

In-App-Messagingとは？

Firebaseには様々な機能がありますが、その中でも今回は「In-App-Messaging」について詳しく説明をしていきます。 「In-App-Messaging」はなにかと言いますと、アプリ内で関連性の高いアクティブユーザーにメッセージを配信することができる機能です。アプリを開いたときに、ポップアップが表示され、購入を促すための「SALE情報」や「新作情報」のお知らせなどが表示された経験はありませんか？ そのようなメッセージを表示させる内容やレイアウト、配信するユーザーの条件を設定することができるのが「In-App-Messaging」です。

In-App-Messagingでできること

• メッセージ内容をカスタマイズできる
  • レイアウト、背景色、文字色、メッセージに添える任意の画像を設定できる
• 配信ユーザーをセグメントできる
  • 特定のオーディエンスやユーザー行動に基づいてメッセージを送信できる
• 配信内容の結果（インプレッション数、クリック数）をコンソール上から確認ができる

設定方法

では実際の画面を見ながら設定をしていきましょう！ まずはFirebaseにログインします。 エンゲージメント＞Messaing＞新しいキャンペーンを作成＞In-App Messaging(ダイアログ)を選択します。

 

①スタイルと内容

メッセージレイアウト

すると、このような画面が表示されるので、メッセージの表示形式を選択します。

レイアウトは全部で4種類あり、それぞれ下記のような見え方になります。

公式HPでは各メッセージの内容を以下のように説明しています。

• カード
  • 2 つの操作ボタンがある構造化メッセージ
  • ユーザーに選択肢を提示できます。
• モーダル
  • 1 つの操作ボタンがある柔軟なメッセージ ダイアログ
  • メッセージのタイトルのみ必須です。残りは自由に使用できます。
• 画像のみ
  • 独自のデザインのメッセージをアップロードします。
  • 魅力的なデザインを簡単に組み込むことができます。
• バナー
  • 通知などのメッセージ
  • 画面で大きなスペースを必要としません。

メッセージのコンテンツ

• 背景・テキストの色：16 進のカラーコードを入力するか、カラー グラデーションを使用してメッセージの色をカスタマイズすることができます。
• メッセージタイトル：ユーザーの目を引くタイトルを簡潔に入力します（必須）
• 本文（省略可）入力すると画像の下に文字が表示されます（任意）
• 画像：画像のURLを添付します。（カードタイプのみ必須）
  • 縦サイズ：縦向きの画像の URL（縦横比 3:2）
  • 横サイズ：横向きの画像の URL（縦横比 1:1）
  • 弊社の場合、1152(幅)×760（高さ）280KB以内（サイズ）にしていることが多いです。
• プライマリボタン：
  • カード：弊社の場合、ユーザーの気持ちを考えると2つのボタンのうち、1つは「閉じる（×）ボタン」として使用することが多いです。（必須）
  • モーダル：一方、モーダルではデフォルトで右上に閉じるボタンがあるため、純粋なアクション用にボタンを設置します。

➁宛先

メッセージ配信をする、ユーザーの条件や行動を設定します。

• キャンペーン名：Firebaseのコンソール上で判別するために入力をします。ユーザーには表示がされません。（必須）
• アプリ：アプリを1つ選択します（必須）
• そのほか、設定したい条件を登録していきます。
• 例えば、iosアプリで初回起動2日目の人に表示させたい場合は以下のような設定になります。
• 「潜在的ユーザーの～」の箇所は、過去7日間にサービスにアクセスしたアクティブ ユーザー数に基づいて計算がされています。対象人数があまりに少ないと設定が誤っているか、配信をしても効果のないキャンペーンの可能性が高いため配信前に気にしてみてください。

③スケジュール

メッセージの開始日時と終了日時を設定します。 「スケジュール設定」をする場合、タイムゾーンが日本時間になっているかを確認します。

• イベント：[+] ボタンををクリックして、トリガーとなる1 つ以上のイベントを追加します。
• デバイスあたりの頻度の制限：ユーザーにメッセージを表示する頻度を制限することができます。デフォルトではユーザーに対し、1回表示がされるとそれ以降は表示がされませんが、日数ごとに表示をさせる設定も可能です。

今回はアプリがアクティブな状態で発火する「on_foreground」で設定をします。

 

④コンバージョンイベント（省略可）

メッセージのインプレッションやクリック数にコンバージョンイベントを紐づけることができます（任意）

⑤その他のオプション（省略可）

カスタムデータを設定すると、メッセージをクリックしたユーザーに追加の情報を表示させるなどのカスタムが可能です。（任意）

まとめ

Firebaseの「In-App-Messaging」を使用することで、エンジニアさんを介さずに手軽にメッセージ配信を行えることがわかりました。 利便性だけでなく、配信後の計測機能により、インプレッションやクリック数などのデータを詳細に把握することが可能なので、効果的なコンテンツやトリガーイベントを見つけ出し、アプリの改善に役立てることができそうです。